<template>
  <a-modal
    :visible="visible"
    :confirm-loading="confirmLoading"
    :title="
      item && item.id * 1 > 0 ? '修改菜单 `' + item.title + '`' : '添加菜单'
    "
    :ok-text="'确认保存'"
    :mask-closable="false"
    @cancel="onClose"
    @ok="handleSubmit"
  >
    <a-form-model
      ref="formInline"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formInline"
      @submit="handleSubmit"
    >
      <a-button v-show="false" html-type="submit" />
      <a-form-model-item :wrapper-col="buttonCol">
        <a-radio-group v-model="formInline.page_type" button-style="solid">
          <a-radio-button :value="0">
            目录
          </a-radio-button>
          <a-radio-button :value="1">
            菜单
          </a-radio-button>
          <a-radio-button :value="2">
            按钮
          </a-radio-button>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="父级菜单" prop="page_role_id">
        <a-tree-select
          v-model="formInline.page_role_id"
          allow-clear
          tree-data-simple-mode
          style="width: 100%;"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="data"
          placeholder="为空时，为顶级菜单"
        />
      </a-form-model-item>

      <a-form-model-item label="名称" prop="title" required>
        <a-input v-model="formInline.title" :max-length="32" placeholder="名称">
          <a-tooltip v-if="formInline.page_type != 2" slot="addonBefore">
            <template slot="title">
              点击修改图标
            </template>
            <a @click="iconVisible = true">
              <app-icon v-if="formInline.icon" :value="formInline.icon" />
              <span v-else>图标</span>
            </a>
          </a-tooltip>
        </a-input>
      </a-form-model-item>

      <a-form-model-item
        v-if="formInline.page_type != 2"
        label="简称"
        prop="title_abbreviation"
      >
        <a-input
          v-model="formInline.title_abbreviation"
          :max-length="32"
          placeholder="简称"
        />
      </a-form-model-item>

      <a-form-model-item
        v-if="formInline.page_type == 2"
        label="后端权限"
        prop="link_url"
      >
        <a-input
          v-model="formInline.link_url"
          :max-length="512"
          placeholder="路由地址"
        >
          <a-select
            slot="addonBefore"
            v-model="formInline.link_method"
            style="width: 90px;"
          >
            <a-select-option value="GET">
              GET
            </a-select-option>
            <a-select-option value="POST">
              POST
            </a-select-option>
            <a-select-option value="PUT">
              PUT
            </a-select-option>
            <a-select-option value="DELETE">
              DELETE
            </a-select-option>
          </a-select>
        </a-input>
      </a-form-model-item>

      <a-form-model-item
        v-if="formInline.page_type == 2"
        label="后端标识"
        prop="link_mark"
      >
        <a-input
          v-model="formInline.link_mark"
          :max-length="32"
          placeholder="后端标识 /user/list"
        />
      </a-form-model-item>

      <a-form-model-item
        v-if="formInline.page_type == 1"
        label="前端地址"
        prop="page_url"
      >
        <a-input
          v-model="formInline.page_url"
          :max-length="512"
          placeholder="前端地址 /home/user/list"
        >
          <a-select
            slot="addonBefore"
            v-model="formInline.page_open_type"
            style="width: 90px;"
          >
            <a-select-option :value="0">
              页签
            </a-select-option>
            <a-select-option :value="1">
              新窗
            </a-select-option>
          </a-select>
        </a-input>
      </a-form-model-item>

      <a-form-model-item
        v-if="formInline.page_type == 1"
        label="前端标识"
        prop="page_mark"
      >
        <a-input
          v-model="formInline.page_mark"
          :max-length="32"
          placeholder="前端标识"
        />
      </a-form-model-item>

      <a-form-model-item label="权重" prop="weight">
        <a-input-number v-model="formInline.weight" />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="buttonCol">
        <a-switch
          v-model="formInline.status_flag"
          checked-children="状态: 正常"
          un-checked-children="状态: 停止"
          @change="
            (val) => {
              formInline.status = val ? 1 : 0
            }
          "
        />
      </a-form-model-item>
    </a-form-model>

    <app-icon-select
      v-model="iconVisible"
      @change="(val) => $set(formInline, 'icon', val)"
    />
  </a-modal>
</template>

<script>
import pageRole from "@/api/pageRole"
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-visible",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "visible",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    item: {
      type: Object,
      default: () => {
        return {
          id: 0,
          type_separator: "/",
          data_type: 0,
          data_value_type: 0,
          weight: 0,
          status: 1,
        }
      },
    },
  },
  data() {
    return {
      buttonCol: { span: 18, offset: 4 },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      confirmLoading: false,

      iconVisible: false,

      formInline: {
        ...this.item,
      },
    }
  },
  watch: {
    visible: function (showFlag) {
      if (!showFlag) return
      this.formInline = {
        status_flag: this.item.status == 1,
      }
      for (let ii in this.item) {
        this.$set(this.formInline, ii, this.item[ii])
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    onClose() {
      this.$emit("change-visible", false)
    },
    onChange() {
      this.onClose()
      this.$emit("change")
    },
    async handleSubmit(e) {
      e.preventDefault()

      let flag = undefined
      this.$refs.formInline.validate((valid) => (flag = valid))
      if (!flag) {
        return
      }

      this.confirmLoading = true

      if (this.$func.isNumber(this.item.id) && this.item.id * 1 > 0) {
        await pageRole
          .update(this.item.id, this.formInline)
          .then((response) => {
            if (response.code !== 1) {
              this.$message.error(response.message)
              return
            }
            this.$message.success(response.message)
            this.onChange()
            return
          })
          .catch((e) => {
            console.log(e)
          })
        this.confirmLoading = false
        return
      }

      await pageRole
        .create(this.formInline)
        .then((response) => {
          if (response.code !== 1) {
            this.$message.error(response.message)
            return
          }
          this.$message.success(response.message)
          this.onChange()
          return
        })
        .catch((e) => {
          console.log(e)
        })

      this.confirmLoading = false
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
.ant-form-item {
  margin-bottom: 6px;
}
</style>
